doctype html
html
head
  link(rel="stylesheet" href="cards.css")
body
  .card
    .card-back
  each card in cards
    .card(class='card-' + card.rank style="color: " + card.hexColor + ";")
      if card.i < 52 && card.value > 10
        .card-royal(style="background-image: url(../graphics/" + card.rank + card.suit[0] + ".svg)")
      else if card.i >= 52
        .card-royal(style="background-image: url(../graphics/joker" + (card.i === 53 ? '' : '2') + ".svg")
      .card-middle
        if card.i < 52
          each suit in card.suitpos
            .card-suit(style='left: ' + (50 + suit[0] * 50) + '%; top: ' + (50 + suit[1] * 50) + '%; transform: translate(-50%, -50%) rotate(' + (suit[2] ? '180deg' : '0') + ')')
              img(src='../fa/' + card.suit + '.svg')
      .card-corner.card-topleft
        .card-rank !{card.printedRank.replace(/\n/g, '<br>')}
        if card.i < 52
          .card-suit
            img(src='../fa/' + card.suit + '.svg')
      .card-corner.card-bottomright
        .card-rank !{card.printedRank.replace(/\n/g, '<br>')}
        if card.i < 52
          .card-suit
            img(src='../fa/' + card.suit + '.svg')
